<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <el-button
              v-if="accreditChildren.createPermission"
              icon="el-icon-plus"
              :disabled="!this.handleSelect.id"
              @click="addOreditor('create')"
            >新增</el-button>
            <el-button
              v-if="accreditChildren.editPermission"
              icon="el-icon-edit"
              :disabled="!this.handleSelect.id"
              @click="addOreditor('editor')"
            >编辑</el-button>
            <el-button
              v-if="accreditChildren.delPermission"
              icon="el-icon-delete"
              :disabled="!this.handleSelect.id"
              @click="deleteOrg"
            >删除</el-button>
          </div>
          <div class="userScroll" style="height:500px;overflow:auto">
            <el-tree
              :data="data"
              default-expand-all
              :highlight-current="true"
              :props="defaultProps"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card" style="height: 610px;">
          <div slot="header">
            <h2>权限详情</h2>
          </div>
          <el-form v-if="form.id" ref="form" :model="form" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="权限编号">
                    <el-input v-model="form.permissionCode" disabled />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="权限名称">
                    <el-input v-model="form.permissionName" disabled />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="菜单图标">
                    <el-input v-model="form.icon" disabled />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="URL">
                    <el-input v-model="form.url" disabled />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="分类">
                    <el-input
                      :value="form.permissionType === 'oper' ? '功能' : form.permissionType === 'menu' ? '菜单' :'页面' "
                      disabled
                    />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="排序号">
                    <el-input v-model="form.sort" disabled />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <el-form-item label="描述">
                    <el-input v-model="form.description" disabled />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :title="isSureCreate ? '新建权限':'编辑权限'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
      center
    >
      <el-form ref="form1" :model="submitForm" label-width="100px" :rules="rules">
        <el-form-item label="权限编号" prop="permissionCode">
          <el-input v-model="submitForm.permissionCode" :disabled="!submitForm.create" />
        </el-form-item>
        <el-form-item label="权限名称" prop="permissionName">
          <el-input v-model="submitForm.permissionName" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="submitForm.icon" />
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="submitForm.url" />
        </el-form-item>
        <el-form-item label="分类" prop="permissionType">
          <el-select
            v-model="submitForm.permissionType"
            clearable
            placeholder="请选择"
            :disabled="!submitForm.create"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sort">
          <el-input v-model="submitForm.sort" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="submitForm.description"
            type="textarea"
            rows="3"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFormVal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const item = {
  description: '',
  sort: '',
  permissionType: '',
  url: '',
  icon: '',
  permissionName: '',
  permissionCode: ''
}
import mmUrl from '~/utils/utilUrl';
import { reduceArr, createDics } from '~/utils/util';
import rule from '~/utils/regular';
export default {
  data() {
    return {
      rules: {
        permissionCode: rule.require,
        permissionName: rule.require,
        sort: rule.sort,
        permissionType: rule.require1
      },
      isSureCreate: true,
      accreditArr: [],
      accreditChildren: {},
      data: [],
      defaultProps: {
        children: 'children',
        label: 'permissionName'
      },
      dialogVisible: false,
      submitForm: {},
      form: {},
      handleSelect: {},
      options: [
        {
          label: '菜单',
          value: 'menu'
        },
        {
          label: '页面',
          value: 'page'
        },
        {
          label: '功能',
          value: 'oper'
        }
      ]
    }
  },
  mounted() {
    this.getInitTreeData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
    
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    sureHandleSelect() {
      return new Promise(resolve => {
        if (!this.handleSelect.id) {
          this.$message.error('请先选择')
        } else {
          resolve()
        }
      })
    },
    addOreditor(res) {
      res === 'create'
        ? (this.isSureCreate = true)
        : (this.isSureCreate = false)

      this.sureHandleSelect().then(() => {
        this.dialogVisible = true
        if (res === 'create') {
          this.submitForm = {
            create: true,
            permissionCode: '',
            permissionName: '',
            icon: '',
            url: '',
            permissionType: 'menu',
            sort: '',
            description: '',
            parentId: this.handleSelect.id
          }
        } else if (res === 'editor') {
          this.submitForm = {
            create: false,
            id: this.handleSelect.id,
            permissionCode: this.handleSelect.permissionCode,
            permissionName: this.handleSelect.permissionName,
            icon: this.handleSelect.icon,
            url: this.handleSelect.url,
            permissionType: this.handleSelect.permissionType,
            sort: this.handleSelect.sort,
            description: this.handleSelect.description,
            parentId: this.handleSelect.parentId
          }
        }
      })
    },
    deleteOrg() {
      this.sureHandleSelect().then(() => {
        this.$post({
          url: mmUrl.permission.delete,
          data: {
            id: this.handleSelect.id
          }
        }).then(res => {
          this.submitForm = {}
          this.form = {}
          this.handleSelect = {}
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getInitTreeData()
        })
      })
    },
    submitFormVal() {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          const that = this
          this.dialogVisible = false
          const status = this.submitForm.create
          this.$post({
            url: status ? mmUrl.permission.create : mmUrl.permission.editor,
            data: {
              item: this.submitForm
            }
          }).then(res => {
            this.submitForm = {}
            this.form = {}
            this.handleSelect = {}
            that.getInitTreeData()
            that.$message({
              type: 'success',
              message: '操作成功'
            })
          })
        }
      })
    },
    handleNodeClick(res) {
      this.handleSelect = JSON.parse(JSON.stringify(res))
      this.form = JSON.parse(JSON.stringify(res))
    },
    getInitTreeData() {
      this.$post({
        url: mmUrl.permission.get,
        data: {
          parentId: ''
        }
      }).then(res => {
        this.data = res
      })
    }
  }
}
</script>

<style>
</style>
